<template>
	<div class="inner-content list-content">
			<div class="title">
				商品列表
			</div>
			<el-row>
			<el-table
			  :data="productList"
			  style="width: 100%">
			  <el-table-column
			    label="商品图片"
			    width="180">
			    <template scope='scope'>
			    	<img :src="scope.row.picUrl" alt="商品图片" width="160" height="160">
			    </template>
			  </el-table-column>
			  <el-table-column
			    prop="waterFactoryName"
			    label="水厂"
			    width="100">
			  </el-table-column>
			  <el-table-column
			    prop="brand"
			    label="品牌名"
			    width="100">
			  </el-table-column>
			  <el-table-column
			    prop="name"
			    label="商品名"
			    width="100">
			  </el-table-column>
			  <el-table-column
			    prop="standard"
			    label="规格"
			    width="100">
			  </el-table-column>
			  <el-table-column
			    prop="disposable"
			    label="一次性用水"
			    width="110">
			  </el-table-column>
			  <el-table-column
			    prop="blBuPr"
			    label="空桶价格（元）"
			    width="100">
			  </el-table-column>
			  <el-table-column
			    prop="prForWaUs"
			    label="售价（元）"
			   width="100">
			  </el-table-column>
			  <el-table-column
			    prop="prForWaSt"
			    label="水店价（元）"
			   width="100">
			  </el-table-column>
			  <el-table-column
			    prop="prForWaDe"
			    label="配送提成（元）"
			    width="100">
			  </el-table-column>
			  <el-table-column
			    prop="producerPrice"
			    label="出厂价（元）"
			    width="100">
			  </el-table-column>
			  <el-table-column
			    label="操作">
			    <template scope='scope'>
			    	<el-button type='text' @click='editProduct(scope.row)'>编辑</el-button>
			    	<el-button  type='text' @click='deleteProduct(scope.row.bucketTypeId,scope.row.name)'>删除</el-button>
			    </template>
			  </el-table-column>
			</el-table>
			</el-row>

			<div class="paging">
			  <el-pagination
			       @current-change='handleCurrentChange'
			       :current-page.sync='currentPage'
			       layout='prev, pager, next, jumper'
			       :total='total'
			       class='pagination'
			       v-show='total'>
			   </el-pagination>
			</div>

			<el-dialog title="编辑商品" :visible.sync="editDialogShow">
				<el-form :model="editForm" :rules="rules"
				label-width='120px' ref='editForm'>
					<el-form-item label='水厂'
					prop='waterFactoryName'>
						<el-input v-model='editForm.waterFactoryName'></el-input>
					</el-form-item>
					<el-form-item label='品牌名'
					prop='brand'>
						<el-input v-model='editForm.brand'></el-input>
					</el-form-item>
					<el-form-item label='商品名'
					prop='name'>
						<el-input v-model='editForm.name'></el-input>
					</el-form-item>
					<el-form-item label='规格'
					prop='standard'>
						<el-input v-model='editForm.standard'></el-input>
					</el-form-item>
					<el-form-item label='一次性用水'
					prop='disposable'>
						<el-input v-model='editForm.disposable'></el-input>
					</el-form-item>
					<el-form-item label='空桶价格（元）'
					prop='blBuPr'>
						<el-input v-model='editForm.blBuPr'></el-input>
					</el-form-item>
					<el-form-item label='售价（元）'
					prop='prForWaUs'>
						<el-input v-model='editForm.prForWaUs'></el-input>
					</el-form-item>
					<el-form-item label='配送提成（元）'
					prop='prForWaDe'>
						<el-input v-model='editForm.prForWaDe'></el-input>
					</el-form-item>
					<el-form-item label='出厂价（元）'
					prop='producerPrice'>
						<el-input v-model='editForm.producerPrice'></el-input>
					</el-form-item>
					<el-form-item class="editFormButton">
						<el-button @click="submitEditForm(editForm)">
							修改
						</el-button>
						<el-button @click="resetEditForm('editForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</div>
</template>

<script>
    import ListJs from './List.js';
    module.exports = ListJs;
</script>

<style scoped lang='less'>
    @import url(List.less);
</style>